<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/admin/index.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="area-util">

        <h:form id="mainForm">
            <p:panel header="Aplicar Medição">
                <h:panelGroup id="dynaFormGroup">
                    <p:messages id="messages" showSummary="true"/>

                    <pe:dynaForm id="dynaForm" value="#{medicaoBean.model}" var="data">

                        <pe:dynaFormControl type="ano" for="ano">
                            <p:inputText id="ano" value="#{data.value}" required="#{data.required}"/>
                        </pe:dynaFormControl>
                        
                        <pe:dynaFormControl type="cliente" for="cli">
                            <p:selectOneMenu id="cli" value="#{data.value}" required="#{data.required}">  
                                <f:selectItems value="#{clienteBean.listar}" var="cliente" 
                                               itemLabel="#{cliente.nome}" itemValue="#{cliente.id}"/>  
                            </p:selectOneMenu>
                        </pe:dynaFormControl>
                        
                        <pe:dynaFormControl type="mes" for="sel" styleClass="select">  
                            <p:selectOneMenu id="sel" value="#{data.value}" required="#{data.required}">  
                                <f:selectItems value="#{medicaoBean.meses}"/>  
                            </p:selectOneMenu>  
                        </pe:dynaFormControl>
                        
                        <pe:dynaFormControl type="input" for="txt">
                            <pe:inputNumber id="txt" value="#{data.value}" 
                                            minValue="0.00" maxValue="100000.00"/> 
                        </pe:dynaFormControl>

                        <f:facet name="buttonBar">
                            <p:commandButton value="Salvar" action="#{medicaoBean.submitForm}"
                                             process="dynaForm" update=":mainForm:dynaFormGroup :mainForm:inputValues"
                                             oncomplete="handleComplete(xhr, status, args)">                            
                            </p:commandButton>
                            <p:commandButton type="reset" value="Limpar respostas" style="margin-left: 5px;"/>
                        </f:facet>
                    </pe:dynaForm>
                </h:panelGroup>
            </p:panel>
            <p:dialog header="Input values" widgetVar="inputValuesWidget">
                <p:dataList id="inputValues" value="#{medicaoBean.medicaoProperties}" var="medicao"
                            style="margin:10px;">
                    <h:outputText value=" #{medicao.id} #{medicao.name}: #{medicao.value}"
                                  style="margin-right: 10px;"/>
                </p:dataList>
            </p:dialog>
        </h:form>

        <h:outputScript id="dynaFormScript" target="body">
            /* <![CDATA[ */
            function handleComplete(xhr, status, args) {
            if(args && args.isValid) {
            PF('inputValuesWidget').show();
            } else {
            PF('inputValuesWidget').hide();
            }
            }
            /* ]]> */
        </h:outputScript>

        <h:outputStylesheet id="dynaFormCSS">
            /* note: trick with colspan is needed for IE8 */
            .pe-dynaform-cell input,
            .pe-dynaform-cell textarea,
            .pe-dynaform-cell[colspan="1"] input,
            .pe-dynaform-cell[colspan="1"] textarea {
            width: 150px;
            }

            /* note: trick with colspan is needed for IE8 */
            .pe-dynaform-cell.calendar input,
            .pe-dynaform-cell[colspan="1"].calendar input {
            width: 120px;
            }

            .pe-dynaform-cell.select .ui-selectonemenu {
            width: 157px !important;
            }

            .pe-dynaform-cell.select .ui-selectonemenu .ui-selectonemenu-label {
            width: 130px !important;
            }
        </h:outputStylesheet>

    </ui:define>

</ui:composition>
